<template>
  <view class="cart">
    <view class="cart-content">
      <view
        class="goods"
        v-for="(item,index) in cartList"
        :key="item.goods_id"
      >
        <!-- 1 复选框 -->
        <view class="chk">
          <!-- 原生小程序就是这么写 -->
          <checkbox-group @change="onChkChange(index)">
            <checkbox
              color="#eb4450"
              :checked="item.checked"
            ></checkbox>
          </checkbox-group>
        </view>
        <!-- 2 图片  -->
        <view class="goods-img">
          <image
            mode="widthFix"
            :src="item.goods_small_logo"
          ></image>
        </view>
        <!-- 3 商品信息  -->
        <view class="goods-info">
          <view class="goods-name">{{item.goods_name}}</view>
          <view class="goods-tool">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="num-tool">
              <view
                @tap="onNumChange(index,-1)"
                class="num-change"
              >-</view>
              <view class="count">{{item.count}}</view>
              <view
                @tap="onNumChange(index,+1)"
                class="num-change"
              >+</view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <!-- 统计 结算  -->
    <view class="pay-tool">
      <view class="chk-all">
        <checkbox-group @change="onAllChange">
          <checkbox :checked="chkAll">全选</checkbox>
        </checkbox-group>

      </view>

      <view class="count-all">
        合计： <text>￥ {{countAll}} </text>
      </view>

      <button
        class="gopay"
        @tap="onGoPay"
      >去结算({{countNum}})</button>
    </view>
  </view>
</template>

<script>
/* 
1 将vuex中的数据取出来 页面渲染 
2 商品单选
  1 给复选框绑定 change 事件  
  2 事件触发了  获取当前的数组的索引 
    cartList[index].checked=!cartList[index].checked;
3 商品数量编辑
  1 给数量编辑按钮 绑定点击事件 
  2 获取到数组对应的商品 
    商品数量 ++ 
    商品数量 -- （1->0??? 删除） 当前的数量如果 等于 1 同时 你想减少 弹窗问你是否想要删除了
4 全选按钮
  1 被动  全选和取消全选
  2 主动 勾选 全选 和 取消全选 
    1 触发全选选中事件 
    2 获取当前的全选 选中状态 
      1 通过事件对象来获取 走不通
      2 获取 计算属性中的值 直接取反即可
    3 取反 获取最终选中状态
    4 遍历数组 挨个修改里面的元素  (获取最终选中状态)


5 计算总价格 
  1 只要去计算那些勾选了的商品 
    单价 * 购买数量 
 */
export default {
  computed: {
    cartList() {
      return this.$store.state.cartList;
    },
    // 计算全选
    chkAll() {
      // 数组中 全部的商品都勾选  [].every   当数组为空的时候 every 也是返回 true
      // 数组中 勾选了的商品的数据的长度 等于 数组的长度  filter
      return (
        this.cartList.length && this.cartList.every((goods) => goods.checked)
      );
    },
    // 计算总价格
    countAll() {
      return this.$store.getters.countAll
    },
    // 计算要结算的数量
    countNum() {
     return this.$store.getters.checkedCount
    },
  },
  onLoad(){
    console.log(this.$store);
  },
  methods: {
    // 商品复选框选中事件
    onChkChange(index) {
      const newCartList = this.cartList;
      newCartList[index].checked = !newCartList[index].checked;
      this.$store.commit("changeList", newCartList);
    },
    // 数量编辑事件
    async onNumChange(index, value) {
      const newCartList = this.cartList;

      // 判断用户是否想要删除数据
      if (newCartList[index].count === 1 && value === -1) {
        // 弹窗
        const [err, result] = await uni.showModal({
          title: "警告",
          content: "您是否想要删除",
          showCancel: true,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
        });
        if (result.confirm) {
          newCartList.splice(index, 1);
          this.$store.commit("changeList", newCartList);
        }
      } else {
        newCartList[index].count += value; // value +1  -1
        this.$store.commit("changeList", newCartList);
      }
    },
    // 全选 事件
    onAllChange() {
      // console.log(this.chkAll);
      const checked = !this.chkAll;
      const newCartList = this.cartList;
      newCartList.forEach((goods) => (goods.checked = checked));
      this.$store.commit("changeList", newCartList);
    },
    // 调整支付页面
    onGoPay() {
      // 1 判断一下现在有没有选中商品
      if (this.countNum > 0) {
        // 可以跳
        uni.navigateTo({ url: "/pages/pay/pay" });
      } else {
        // 提示用户要选购商品
        uni.showToast({
          title: "您还没有选择要购买的商品",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.cart {
  padding-bottom: 60rpx;
}
.cart-content {
  .goods {
    display: flex;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    .chk {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      checkbox {
      }
    }

    .goods-img {
      flex: 2;
      image {
        width: 100%;
      }
    }

    .goods-info {
      flex: 3;
      padding-left: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-name {
      }

      .goods-tool {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods-price {
          color: #eb4450;
        }

        .num-tool {
          display: flex;
          align-items: center;

          > view {
            // padding: 20rpx;
          }
          .num-change {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            border: 1rpx solid #666;
          }

          .count {
            margin: 0 15rpx;
          }
        }
      }
    }
  }
}
.pay-tool {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #ccc;
  .chk-all {
    checkbox {
    }
  }
  .count-all {
    margin-left: 20rpx;
    flex: 1;
    text {
      color: #eb4450;
    }
  }

  .gopay {
    width: 160rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #ea4350;
    color: #ffffff;
    margin-right: 10rpx;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }
}
</style>